import React, { useEffect, useState } from 'react'
import { Form, Button, DatePicker, Input, Modal, Row, Col} from 'antd'
import { connect } from 'umi'

const FormItem = Form.Item
const formLayout = {
  labelCol: { span: 7 },
}

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
}

const CreateForm = (props) => {

  const { onSubmit, onCancel, currentUser, current,visible } = props
  const [form] = Form.useForm()

  useEffect(() => {
    if (current) {
      form.setFieldsValue(current)
    }
  }, [current])

  const onFormCancel = () => {
    form.resetFields()
    onCancel()
  }

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields()
    form.resetFields()
    onSubmit(fieldsValue)
  }


  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="oid" label="新员工id">
              <Input disabled={true} />
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="trainTime" label="新员工培训时间">
              <DatePicker style={{width: '100%'}}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="trainScore" label="新员工培训成绩">
              <Input/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="scoreNumReceive" label="360评分人数收回">
              <Input/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="scoreNumSend" label="360评分人数发出">
              <Input/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="score" label="360考评得分">
              <Input/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  }

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" onClick={() => handleSubmit()}>确认</Button>
      </>
    )
  }

  return (
    <Modal
      width={1280}
      destroyOnClose
      title="编辑评分"
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{ paddingTop: '24px' }}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
}


export default connect(({ user, personnel }) => ({
  personnel,
  currentUser: user.currentUser,
}))(CreateForm)
